<template>
  <div class="lottery-record">
    <span class="logo">
      <lottery-icon :name="winningNumbers.lotteryName"></lottery-icon>
    </span>
    <div class="main">
      <div main-left>
        <component :is="currentComponent" :winningNumbers="winningNumbers"></component>
      </div>
      <div class="main-right">
        <div class="times time-countdown">
          <count-down :timeStamp="winningNumbers.drawTime"></count-down>
        </div>
        <div class="buy-now">
          <button class="btn button-selected hover-style" @click="handleClick">
            立即投注
          </button>
        </div>
      </div>
    </div>
    <div class="right border-left">
      <div class="instruction hover-style">
        <span class="icon">
          <i class="iconfont iconindex_wanfashuoming"></i>
        </span>
        <span>
          玩法说明
        </span>
      </div>
      <div class="record hover-style">
        <span class="icon">
          <i class="iconfont iconindex_kaijiangjilu">
          </i>
        </span>
        <span>
          开奖记录
        </span>
      </div>
    </div>
  </div> 
</template>

<script>
import WinningInfoSsc from '@/components/winning-info/winning-info-ssc'
import WinningInfoSc from '@/components/winning-info/winning-info-sc'
import WinningInfoKs from '@/components/winning-info/winning-info-ks'
import LotteryIcon from '@/components/base/lottery-icon/lottery-icon'
import CountDown from '@/components/base/count-down/count-down'

export default {
  components: {
    WinningInfoSsc,
    WinningInfoSc,
    WinningInfoKs,
    LotteryIcon,
    CountDown
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return  {
          id: 3,
          lotteryName: '北京赛车',
          icon: '',
          numberInfo: {
            dateNo: '819048',
            numbers: '1,2,2,3,8,9,7',
            context:'大，小，单',
          },
          path: '/select-number/bjracer',
          drawTime: new Date().getTime() + 100000
        }
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      drawTime: '00:00:00',
      components: [
        'WinningInfoSsc', 
        'WinningInfoSc', 
        'WinningInfoSsc', 
        'WinningInfoKs',
        'WinningInfoSsc',
        'WinningInfoSsc'
      ],
    }
  },
  methods: {
    handleClick() {
      let path = this.winningNumbers.path 
      this.$router.push({path: path})
    }
  },
  computed: {
    currentComponent() {
      return this.components[this.activeIndex]
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .lottery-record
      width 940px
      height 106px
      display flex 
      align-items center
      background #fff
      .logo
        width 72px
        height 72px
        margin-left 32px
        border-radius 50%
        text-align center
        line-height 72px
      .logo >>> .icon 
        width 72px 
        height 72px 
        font-size 60px 
      .right
        position absolute 
        right 0
        bottom 0
        width 106px
        height 106px 
        color rgba(140,143,152,1)
        text-align center
        border-color $color-divide-line
        .instruction
          margin-top 22px
          .icon
            .iconfont 
              color $color-theme-red
        .record 
          margin-top 25px
          .icon 
            .iconfont 
              color $color-primary-blue
      .main
        flex 1
        display flex 
        align-items center
        height 106px
        margin-right 126px
        margin-left 20px
        justify-content space-between
        box-sizing border-box
        .main-right 
          .times 
            margin-bottom 14px
          .buy-now
            float right 
            .btn 
              outline-style none
              height 32px
              display flex 
              align-items center 
              justify-content center 
              width 80px 
</style>